<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title>壹脉智能CRM</title>
  <!-- Bootstrap Core CSS -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <link href="./css/style.min.css" rel="stylesheet">
  <link href="./css/colors/default.css" id="theme" rel="stylesheet">
  <link rel="stylesheet" href="./css/diy.min.css">
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
  <div class="preloader">
    <div class="loader">
      <div class="loader__figure"></div>
      <p class="loader__label">壹脉</p>
    </div>
  </div>
  <div id="main-wrapper">
    <header class="topbar">
      <nav class="navbar top-navbar navbar-expand-md navbar-light">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">
            <b>
              <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo" />
              <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
            </b>
            <span>
              <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
            </span>
          </a>
        </div>
        <div class="navbar-collapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
            <li class="nav-item"> <a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
          </ul>
          <user-head></user-head>
        </div>
      </nav>
    </header>
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <company-position></company-position>
        <nav class="sidebar-nav p-0">
          <c-slider current="8"></c-slider>
        </nav>
      </div>
    </aside>
    <div class="page-wrapper">
      <div class="container-fluid">
        <div class="row page-titles">
          <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">订单详情</h3>
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
              <li class="breadcrumb-item">营销活动</li>
              <li class="breadcrumb-item">分销</li>
              <li class="breadcrumb-item">
                <a href="/main/assembleOrder.html">
                  拼团订单
                </a>
              </li>
              <li class="breadcrumb-item active">订单详情</li>
            </ol>
          </div>
        </div>
        <div class="bgfff p-l-29 p-r-31">
          <div class="p-t-15 p-b-15 bbef0">
            <span class="p-r-35 fbold fs20">订单详情</span>
          </div>
          <div class="p-t-15 field-list p-b-15 bbef0">
            <h3 class="fs18 m-b-0">团购信息</h3>
            <div class="row">
              <div class="item" v-for="item in baseInfoConfig" :key="item.key" :class="item.className ? item.className : 'col-lg-6'">
                <span class="field-name" style="flex-basis: auto">{{item.label}}</span>
                <span class="field-value">{{item.render ? item.render(info) : info[item.key]}}</span>
              </div>
            </div>
          </div>
          <div class="p-t-15 field-list p-b-15">
            <h3 class="fs18 m-b-0">商品信息</h3>
            <div class="item" v-for="item in consigneeConfig" :key="item.key">
              <span class="field-name">{{item.label}}</span>
              <span class="field-value">{{item.render ? item.render(info) : info[item.key]}}</span>
            </div>
          </div>
          <div class="p-t-15 field-list p-b-15">
            <h3 class="fs18 m-b-0">参团信息</h3>
            <table class="align-cen-table textc display nowrap table table-hover table-bordered bgf6f9fa m-b-20">
              <thead>
                <tr>
                  <th>订单编号</th>
                  <th>用户昵称</th>
                  <th>付款金额</th>
                  <th>下单时间</th>
                  <th>拼团时间</th>
                  <th>订单状态</th>
                </tr>
              </thead>
              <tbody class="bgfff">
                <tr class="curpointer" v-for="(item, index) in info.ordersModelList">
                  <td>{{item.ordersNo}}</td>
                  <td>{{item.nickeName}}</td>
                  <td>{{(item.payPrice/100).toFixed(2)}}</td>
                  <td>{{item.createTime | formatDate('yyyy/MM/dd hh:mm')}}</td>
                  <td>{{item.assembleTime | formatDate('yyyy/MM/dd hh:mm')}}</td>
                  <td>{{item.orderState | isState(item.orderState)}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- All Jquery -->
  <!-- ============================================================== -->
  <script src="./js/jquery.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/perfect-scrollbar.jquery.min.js"></script>
  <script src="./js/sidebarmenu.js"></script>
  <!--Custom JavaScript -->
  <script src="./js/custom.min.js"></script>
  <script src="./js/layer/layer.js"></script>
  <!-- ============================================================== -->
  <script src="./js/vue.js"></script>
  <script src="./js/config.js"></script><script src="./js/extend.js"></script>
  <script>
  $(function() {
    let formatDate = Vue.filter('formatDate');

    var vw = new Vue({
      el: '#main-wrapper',
      data: {
        info: {},
        navs_id: '',
        navs: [
          { id: '', label: '全部订单' },
          { id: '1', label: '待付款' },
          { id: '2', label: '待发货' },
          { id: '3', label: '待收货' },
          { id: '4', label: '交易完成' },
        ],
        baseInfoConfig: [
          { label: '团购状态：', render(info) {
              const type = {1: '拼团中', 2: '拼团成功', 3: '拼团失败', 4: '已退款'}
              return type[info.state]
            },
          },
          { label: '单账号最多可开团数：', key: 'openRegiment' },
          { label: '开团团长：', key: 'nickeName' },
          { label: '单账号最多可参团数：', key: 'joinRegiment' },
          { label: '成团人数：', key: 'assembleNum' },
          { label: '单账号最多可购买数：', key: 'maxPurchase' },
          { label: '还差人数：', render(info) {
              return info.assembleNum - info.putAssemble
            }
          },

          { label: '开始时间：',
            render(info) {

              return formatDate(info.startTime, 'yyyy/MM/dd hh:mm')
            }, className: 'col-lg-12' },
          { label: '结束时间：',render(info) {

              return formatDate(info.endTime, 'yyyy/MM/dd hh:mm')
            }, className: 'col-lg-12' },
        ],
        consigneeConfig: [
          { label: '商品名称：',  render(info) {
                    var specName = info.goodSpecModelList[0] && info.goodSpecModelList[0].specName ? info.goodSpecModelList[0].specName: "";
                  return info.goodsName + " " + specName;
              }
          }
        ],
        assembleId: '',
        orderInfo: []
      },
      filters: {
        isState(val) {
          const type = {1: '待付款', 2: '待发货', 3: '待收货', 4: '已完成', 5: '交易取消', 6: '退款成功'}
          return type[val]
        }
      },
      mounted() {
        try {
          this.assembleId = $.formatParams(location.href).id;
        } catch (e) {

        }
        if (this.assembleId) {
          this.getOrderInfo();
        }
      },
      methods: {
        getOrderInfo() {
          $.cAjax('/crmPc/assemble/getGoodsAssembleInfo', {
            data: {
              assembleId: this.assembleId,
            }
          }).then(res => {
            this.info = res;
          })
        },
      }
    })
  })
  </script>
</body>

</html>
